<template>
  <div>
    <el-card>
      <!-- 顶部布局 -->
      <header>
        <el-button type="primary">返回首页</el-button>
        <p>装备百度数据融合服务系统</p>

      </header>
      <!-- 搜索词条 -->
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input
            v-model="input"
            placeholder="请输入内容"
          ></el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary">进入词条</el-button>
        </el-col>
      </el-row>

      <!-- 相关搜索推荐 ,分为两部分-->
      <div class="search-first">
        <div class="search-wrapper">
          <!-- 左侧内容 -->
          <!-- 标题系列 -->
          <div class="name">
            <span>东风系列导弹</span>
            <el-button type="primary">评价词条</el-button>
            <!-- <p>
              <icon class=""></icon> 收藏
            </p> -->
          </div>
          <!-- 解释名词 -->
          <div class="explame">
            <span class="some">同义词</span>
            <span class="dong">东风导弹</span>
            <span class="dayi">一般指东风系列导弹</span>
          </div>
          <div class="title">
            东风导弹系列，是中华人民共和国一系列进程、中远程的洲际弹道导弹。
          </div>
          <!-- 目录 -->
          <div class="list">
            <!-- 左边 -->
            <p class="list-left">目录</p>
            <!-- 右边 -->
            <div class="list-right">
              <p><span>1</span>&nbsp;&nbsp;&nbsp;<span>历史沿革</span></p>
              <ul>
                <li>第一代</li>
                <li>第二代</li>
              </ul>
              <p><span>2</span>&nbsp;&nbsp;&nbsp;<span>历史沿革</span></p>
              <ul>
                <li>二装炮备</li>
                <li>泄密事件</li>
              </ul>
            </div>
          </div>
          <!-- 历史沿革 -->
          <div class="history">
            <div class="history-title">
              <span class="span-one"></span>
              <p>历史沿革</p>
              <span class="span-two">
                <hr>
              </span>
            </div>
            <div class="history-content">
              <div class="history-left">
                <p class="history-left-span-one">第一代</p>
                <span class="history-left-span-two">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中国第20批
                </span>
                <span class="history-left-span-three">
                  赴黎维和部队在任务一线向祖国
                  献礼军史点击 红军长征在贵州:从遵义会议开始
                  独立自主 抗美援朝,中美力量悬殊,中国
                  为什么敢出兵? 共和国功勋人物丨
                  陈红军:功勋闪耀喀喇昆仑 中国共产党人...
                </span>
                <br>
                <!--  -->
                <span class="history-left-span-two">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中国第20批
                </span>
                <span class="history-left-span-three">
                  赴黎维和部队在任务一线向祖国
                  献礼军史点击 红军长征在贵州:从遵义会议开始
                  独立自主 抗美援朝,中美力量悬殊,中国
                  为什么敢出兵? 共和国功勋人物丨
                  陈红军:功勋闪耀喀喇昆仑 中国共产党人...
                </span>
                <br>

                <span class="history-left-span-two">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中国第20批
                </span>
                <span class="history-left-span-three">
                  赴黎维和部队在任务一线向祖国
                  献礼军史点击 红军长征在贵州:从遵义会议开始
                  独立自主 抗美援朝,中美力量悬殊,中国
                  为什么敢出兵? 共和国功勋人物丨
                  陈红军:功勋闪耀喀喇昆仑 中国共产党人...
                </span>
                <br>

                <span class="history-left-span-two">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中国第20批
                </span>
                <span class="history-left-span-three">
                  献礼军史点击 红军长征在贵州:从遵义会议开始
                  陈红军:功勋闪耀喀喇昆仑 中国共产党人...
                </span>
              </div>
              <div class="history-right">
                <img
                  :src="backImg"
                  class="imgs"
                >
              </div>
            </div>
          </div>
          <!-- 词条图册 -->
          <div class="booklet">
            <!-- 上半部分 -->
            <div class="booklet-top">
              <p>词条图册</p>
              <span class="top-span-one">更多图册<span class="top-span-two"></span></span>
            </div>

            <!-- 下半部分 -->

            <div class="booklet-bottom">
              <dl
                v-for="(item,index) in imgs"
                :key="index"
              >
                <dt><img :src="item.src"></dt>
                <dd>{{item.title}}</dd>
              </dl>
              <!-- <dl>
                <dt><img :src="backImg"></dt>
                <dd>东风-21c(2)</dd>
              </dl>
              <dl>
                <dt><img :src="backImg"></dt>
                <dd>东风-21c(2)</dd>
              </dl> -->
            </div>
          </div>
        </div>
        <!-- 相关推荐 -->
        <div class="right-wrapper">
          <div class="right-top">
            <div class="right-top-top">本词条认证专家为</div>
            <div class="right-top-bottom">
              <p class="top-bottom-p"></p>
              <div class="top-bottom-left">
                <span class="left-span-one">刘军</span>
                <span class="left-span-two">副研究员</span>
                <p>中国科学院工程热物理研究所</p>
              </div>
              <div class="top-bottom-right">
                审核
              </div>
            </div>
          </div>
          <!-- 词条统计 -->
          <div class="statistics">
            <p>词条统计</p>
            <span>浏览次数：2793377次</span><br>
            <span>编辑次数：81次<span class="statistics-history">历史版本</span></span>
            <br><span>最近更新：Lizhiwei0606 (2021-04-25)</span>
          </div>
          <!-- 突出贡献榜 -->
          <div class="contribute">
            <p>突出贡献榜</p>
            <span>用户accf0701</span>
          </div>
          <!-- 相关推荐 -->
          <div class="recommend">
            <span>
              相关推荐
            </span>
            <p>东风-xx1</p>
            <p>东风-xx2</p>
            <p>东风-xx3</p>
            <p>东风-xx4</p>
            <p>东风-xx151</p>
          </div>
        </div>
      </div>

    </el-card>
  </div>
</template>
<script>
import backImg from "../../assets/img/2.png";

export default {
  data() {
    return {
      backImg: backImg,
      input: "",
      // 图片的合集
      imgs: [
        {
          id: 0,
          title: "习近平讲述长征1",
          src: "static/img/5.jpg"
        },
        {
          id: 0,
          title: "军舰6号",
          src: "static/img/4.jpg"
        },
        {
          id: 0,
          title: "飞天成功",
          src: "static/img/6.jpg"
        }
      ]
    };
  }
};
</script>
<style scoped>
.el-card {
  height: 100%;
}
/* 顶部布局 */
header .el-button {
  float: left;
  margin-top: -12px;
}
header p {
  font-size: 21px;
  margin-left: 450px;
  margin-top: -5px;
}
/* 搜索栏 */
.el-col:nth-child(1) {
  margin-left: 320px;
  margin-top: 15px;
}
.el-col {
  margin-top: 15px;
}

/* 搜索记录 */
.search-wrapper {
  border: 1px solid lightgray;
  width: 74%;
  margin-left: 50px;
  margin-top: 40px;
}
.search-wrapper .name {
  display: flex;
  align-items: center;
  /* justify-content: space-around; */
}
.search-wrapper .name span {
  font-size: 24px;
  margin: 30px 8px 10px 35px;
}
.search-wrapper .el-button {
  color: aliceblue;
  font-size: 14px;
  margin: 30px 8px 10px 15px;
}

/* 相关推荐 */
.right-wrapper {
  flex: 1;
  margin-left: 15px;
  margin-top: 38px;
  border: 1px solid lightgray;
}

.search-first {
  display: flex;
}
/* 解释名词 */
.explame {
  display: flex;
  align-items: center;
  /* justify-content: space-around; */
  margin: 0px 4px 50px 35px;
}
.explame .some {
  font-size: 13px;
  display: block;
  color: rgb(13, 157, 240);
  text-align: center;
  line-height: 17px;
  width: 44px;
  border-radius: 2px;
  border: 1px solid rgb(13, 157, 240);
  margin-right: 6px;
}
.explame .dong {
  font-size: 12px;
  color: rgb(13, 157, 240);
  /* margin-right: 5px; */
}
.explame .dayi {
  color: gray;
  font-size: 12px;
}
.search-first .title {
  font-size: 14px;
  margin-top: 35px;
  margin-left: 55px;
  margin-bottom: 25px;
}
/* 目录 */
.list {
  display: flex;
  /* align-items: center; */
  width: 350px;
  height: 200px;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
}
.list .list-left {
  width: 80px;
  /* border-right: 1px solid rgb(223, 223, 223); */
  height: 180px;
  line-height: 60px;
  padding-left: 50px;
  font-size: 22px;
}
.list-right {
  border-left: 1px solid rgb(223, 223, 223);
  height: 200px;
  padding-left: 15px;
}
.list-right p {
  font-size: 18px;
  color: dodgerblue;
  line-height: 15px;
}
.list-right ul li {
  font-size: 12px;
  list-style: lightgray;
  line-height: 19px;
}
.list-right ul {
  margin-top: -8px;
}
.history {
  height: 350px;
  /* border: 1px solid #000; */
  margin-top: 35px;
}
.history-title {
  display: flex;
  height: 45px;
  align-items: center;
  /* border: 1px solid #000; */
}
.history-title .span-one {
  display: block;
  width: 25px;
  height: 35px;
  background: dodgerblue;
}
.history-title p {
  font-size: 25px;
  margin-left: 20px;
}
.history-title .span-two hr {
  width: 650px;
  background: lightgray;
  margin-left: 15px;
}
.history-content {
  display: flex;
  justify-content: space-around;
  /* align-items: center; */
}
.history-content .history-left {
  /* border: 1px solid #000; */
  width: 66%;
  margin-left: 4%;
}
.history-content .history-left-span-one {
  font-size: 20px;
  margin-top: 15px;
  margin-bottom: 9px;
}
.history-content .history-left-span-two {
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
}
.history-content .history-left-span-three {
  line-height: 21px;
  font-size: 14px;
}
.history-right {
  position: relative;
  /* border: 1px solid red; */
  flex: 1;
  /* margin-top: -300px; */
}
.history-right .imgs {
  position: absolute;
  top: 65px;
  right: 12px;
  width: 250px;
}
.booklet {
  width: 100%;
  /* border: 1px solid #000;/ */
  margin-top: 75px;
}
.booklet-top {
  width: 97%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: -8px;
}
.booklet-top p {
  font-size: 20px;
}
.booklet-top .top-span-one {
  display: block;
  border: 2px solid lightgray;
  color: rgb(61, 12, 240);
  width: 70px;
  height: 22px;
  font-size: 12px;
  text-align: center;
  line-height: 22px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: 5px;
}
.booklet-top .top-span-two {
  display: block;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgb(61, 12, 240);
  font-size: 0;
  line-height: 0;
  transform: rotate(90deg);
  /* border-color: transparent transparent transparent rgb(61, 12, 240); */
}
.booklet-bottom {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  border-top: 1px solid lightgray;
}
.booklet-bottom li {
  list-style: none;
}
.booklet-bottom img {
  margin: 12px 5px 2px 8px;
  width: 260px;
  height: 150px;
}
.booklet-bottom dd {
  font-size: 13px;
  color: rgb(97, 92, 92);
  margin-left: 12px;
}
.booklet-bottom dt {
  width: 98%;
}
.right-top {
  border-bottom: 1px solid lightgray;
  width: 100%;
}
.right-top .right-top-top {
  font-size: 14px;
  color: black;
  font-weight: 520;
  margin: 15px 0 18px 12px;
}
.right-top .right-top-bottom {
  width: 95%;
  margin-left: 12px;
  display: flex;
  height: 85px;
  font-size: 12px;
}
.right-top-bottom .top-bottom-p {
  width: 4px;
  height: 40px;
  background: dodgerblue;
  border-radius: 2px;
}
.top-bottom-left {
  margin-top: 14px;
  line-height: 11px;
  margin-left: 11px;
}
.top-bottom-left .left-span-one {
  font-size: 14px;
  margin-top: 12px;
}
.top-bottom-left .left-span-one {
  padding-right: 5px;
}
.top-bottom-left .left-span-two {
  line-height: 0px;
  color: rgb(143, 143, 143);
  padding-left: 10px;
  border-left: 1px solid lightgray;
}
.top-bottom-left p {
  color: rgb(143, 143, 143);
}
.top-bottom-right {
  width: 35px;
  height: 15px;
  border: 1px solid rgb(23, 91, 180);
  line-height: 15px;
  text-align: center;
  margin-right: 10px;
  margin-top: 10px;
}
/* 词条统计 */
.statistics {
  height: 120px;
  font-size: 12px;
  border-bottom: 1px solid lightgray;
  margin-left: 15px;
}
.statistics p {
  font-size: 14px;
  font-weight: 700;
}
.statistics span {
  line-height: 24px;
}
.statistics .statistics-history {
  color: cornflowerblue;
}
/* 突出贡献榜 */
.contribute {
  margin-left: 15px;
  margin-top: 19px;
}
.contribute p {
  font-size: 14px;
  font-weight: 700;
  line-height: 5px;
}
.contribute span {
  font-size: 12px;
}
/* 相关推荐 */
.recommend {
  margin-top: 20px;
  border: 1px solid #000;
  height: 280px;
  font-size: 13px;
  line-height: 7px;
  /* 强制滚动条 */
  overflow-y: scroll;
}
.recommend p {
  margin-left: 8px;
}
.recommend span {
  display: block;
  font-size: 16px;
  margin-left: 8px;
  margin-top: 15px;
}
</style>


